<!DOCTYPE HTML>
<html>

<head>
    <title>拖放示例-文本</title>
</head>
<style>
.main {
    display: flex;
    justify-content: space-around;
}
.left {
    width: 300px;
    height: 500px;
    margin-right: 10px;
    border: 1px solid red;
    text-align: center;
    box-sizing: border-box;
    padding: 1px;
}
.right {
    width: 300px;
    height: 500px;
    border: 1px solid lightseagreen;
    text-align: center;
    box-sizing: border-box;
    padding: 1px;
}
.txt {
    border: 1px solid gray;
    margin: 1px;
    padding: 5px;
    cursor: move;
}
</style>

<body>
<div class="main">
    <div class="left" id="left">
        <div class="txt-show">左边区域</div>
        <div id='txt1' draggable="true" class="dragable txt txt1">可移动的文字一</div>
        <div id='txt2' draggable="true" class="dragable txt txt2">可移动的文字二</div>
        <div id='txt3' draggable="true" class="dragable txt txt3">可移动的文字三</div>
        <div id='txt4' draggable="true" class="dragable txt txt4">可移动的文字四</div>
        <div id='txt5' draggable="true" class="dragable txt txt5">可移动的文字五</div>
    </div>
    <div class="right" id='right'>
        <div class="txt-show">右边区域</div>
    </div>
</div>

<script>
    window.onload = function(){
        let txtObj = document.getElementsByClassName('txt');
        for ( var i = 0; i < txtObj.length; i++) {
            txtObj[i].ondragstart = handle_start;
            //txtObj[i].ondrag = handle_drag;
            //txtObj[i].ondragend = handle_end;
        }
        function handle_start(e) {
            e.dataTransfer.setData('Text', e.target.id);
            console.log('handle_start-拖动开始');
        }
        //function handle_drag(e) {
        //    console.log('handle_drag-拖动中');
        //}
        //function handle_end(e) {
        //    console.log('handle_end-拖动结束');
        //}
    
        let target = document.getElementById('right');
        //target.ondragenter = handle_enter;
        target.ondragover = handle_over;
        //target.ondragleave = handle_leave;
        
        target.ondrop = handle_drop;

        let leftTarget = document.getElementById('left');
        //leftTarget.ondragenter = handle_enter;
        leftTarget.ondragover = handle_over;
        //leftTarget.ondragleave = handle_leave;
        leftTarget.ondrop = handle_drop;
    
        function handle_enter(e) {
            e.preventDefault();
            console.log('handle_enter-进入目的地');
        }
        function handle_over(e) {
            e.preventDefault();
            let returnObj = e.dataTransfer.getData('Text');
            console.log(returnObj +'-handle_over-在目的地范围内');
        }
        function handle_leave(e) {
            e.preventDefault();
            let returnObj = e.dataTransfer.getData('Text');
            console.log(returnObj);
            console.log('handle_leave-没有放下就离开目的地');
        }
        function handle_drop(e) {
            e.stopPropagation();// 不再派发事件。解决Firefox浏览器，打开新窗口的问题。
            e.preventDefault();
            let returnObj = e.dataTransfer.getData('Text');
            if (returnObj) {
                e.target.appendChild(document.getElementById(returnObj));
            }
            console.log(returnObj + '-handle_drop-在目的地区释放');
        }
    };
        
</script>
</body>

</html>